﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page isELIgnored="false"%>

<c:set var="i" value="0" />

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link type="text/css" rel="stylesheet" href="css/core.css" />
		<title>Hong Kong Traffic Monitor</title>
		<style type="text/css">
			table {
				border:1px solid #BBBBBB;
				border-collapse:collapse;
				border-spacing:0;
				clear:right;
				margin:1em 0 0 1px;
			}
			td {
				background-color:#FFFFFF;
				border:1px solid #BBBBBB;
				padding:6px 12px;
				text-align:left;
				vertical-align:top;
			}
		</style>
	<body>
		<h1>The all-in-one Hong Kong Traffic Monitor</h1>
		<p />
		<table>
			<tr><td>#</td><td>key</td><td>Area</td><td>Dot</td><td>Path</td><td>Name</td></tr>
				<c:forEach items="${trafficInfo.area}" var="area">
					<c:forEach items="${area.dot}" var="dot">
						<tr>
							<td><c:set var="i" value="${i+1}" />${i}</td>
							<td>${area.areaID}.${dot.dotID}.id=${i}<br />${area.areaID}.${dot.dotID}.latlng=</td>
							<td>${area.areaID}</td>
							<td>${dot.dotID}</td>
							<td>${dot.dotURL}</td>
							<td>${area.areaName} - ${dot.dotName}</td>
						</tr>
					</c:forEach>
				</c:forEach>
		</table>
		<p />
		<img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="Powered by Google App Engine" />
	</body>
</html>
